<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付结果</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2627533_d7zlvvj6zdr.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .success-icon {
            font-size: 60px;
            color: #52c41a;
        }
        .fail-icon {
            font-size: 60px;
            color: #ff4d4f;
            display: none;
        }
        .card {
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        }
        .primary-btn {
            background: linear-gradient(to right, #0052d9, #1890ff);
        }
        .secondary-btn {
            background-color: #f0f0f0;
            color: #333;
        }
    </style>
</head>
<body class="min-h-screen">
    <header class="bg-white p-4 flex items-center shadow-sm">
        <a href="../core/home.html" class="mr-4">
            <i class="icon iconfont icon-arrow-left"></i>
        </a>
        <h1 class="text-lg font-medium flex-1 text-center">支付结果</h1>
        <div class="w-6"></div>
    </header>

    <main class="p-4">
        <!-- 支付成功状态 -->
        <div class="bg-white card p-6 flex flex-col items-center">
            <i class="success-icon iconfont icon-success mb-4"></i>
            <i class="fail-icon iconfont icon-close mb-4"></i>
            <h2 class="text-xl font-medium mb-2">支付成功</h2>
            <p class="text-gray-500 text-sm mb-6">感谢您的购买，我们会尽快为您安排发货</p>
            
            <div class="w-full border-t border-gray-100 pt-6">
                <div class="flex justify-between mb-3">
                    <span class="text-gray-500 text-sm">订单编号</span>
                    <span class="text-sm">GZ2025060315243289</span>
                </div>
                <div class="flex justify-between mb-3">
                    <span class="text-gray-500 text-sm">支付方式</span>
                    <span class="text-sm">微信支付</span>
                </div>
                <div class="flex justify-between mb-3">
                    <span class="text-gray-500 text-sm">支付金额</span>
                    <span class="text-lg font-medium text-red-500">¥1249.00</span>
                </div>
                <div class="flex justify-between mb-3">
                    <span class="text-gray-500 text-sm">支付时间</span>
                    <span class="text-sm">2025-06-03 15:24:32</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500 text-sm">获得积分</span>
                    <span class="text-sm text-blue-500">+1249</span>
                </div>
            </div>
        </div>
        
        <!-- 相关推荐 -->
        <div class="mt-4">
            <h3 class="text-base font-medium mb-3 px-1">为您推荐</h3>
            <div class="grid grid-cols-2 gap-3">
                <div class="bg-white card p-2">
                    <div class="w-full h-32 bg-gray-100 rounded-lg overflow-hidden mb-2">
                        <img src="https://via.placeholder.com/150x150?text=产品1" class="w-full h-full object-cover" alt="推荐产品">
                    </div>
                    <div class="text-sm line-clamp-2">贵州特色黔东南苗族蜡染抱枕套装</div>
                    <div class="text-red-500 font-medium mt-1">¥128.00</div>
                </div>
                <div class="bg-white card p-2">
                    <div class="w-full h-32 bg-gray-100 rounded-lg overflow-hidden mb-2">
                        <img src="https://via.placeholder.com/150x150?text=产品2" class="w-full h-full object-cover" alt="推荐产品">
                    </div>
                    <div class="text-sm line-clamp-2">梵净山高山绿茶 特级礼盒装 125g</div>
                    <div class="text-red-500 font-medium mt-1">¥198.00</div>
                </div>
            </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="mt-6 flex flex-col">
            <button class="primary-btn text-white py-3 rounded-full font-medium mb-3">
                查看订单
            </button>
            <button class="secondary-btn py-3 rounded-full font-medium mb-3">
                返回首页
            </button>
            <button class="secondary-btn py-3 rounded-full font-medium">
                联系客服
            </button>
        </div>
        
        <!-- 社交分享 -->
        <div class="mt-6 bg-white card p-4">
            <h3 class="text-base font-medium mb-3">分享购买成果</h3>
            <div class="flex justify-around">
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center mb-1">
                        <i class="icon iconfont icon-wechat text-white"></i>
                    </div>
                    <span class="text-xs">微信</span>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center mb-1">
                        <i class="icon iconfont icon-moment text-white"></i>
                    </div>
                    <span class="text-xs">朋友圈</span>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center mb-1">
                        <i class="icon iconfont icon-weibo text-white"></i>
                    </div>
                    <span class="text-xs">微博</span>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center mb-1">
                        <i class="icon iconfont icon-link text-white"></i>
                    </div>
                    <span class="text-xs">复制链接</span>
                </div>
            </div>
        </div>
    </main>
    
    <script>
        // 可以根据URL参数动态切换支付成功/失败状态
        // 例如：if (new URLSearchParams(window.location.search).get('status') === 'fail') { 
        //   显示支付失败 
        // }
    </script>
</body>
</html> 